<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
  <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>4. Space Buttons and Tabs</h1>
   <h2>Space action buttons, radios, tabs, combos, popups</h2>

   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='04-Space_Buttons.xml'>04-Space_Buttons.xml</a></div>
      <div class="Main" style='width:100%; height:384px;'>
         <bdo Debug='check' Data_Url='04-Space_Buttons.xml'></bdo>
      </div>
   </center>

   <ul>
      <li>   
         <h3>Button</h3> type shows <b>action button</b> with many features, used mostly in <b>Space</b> rows.<br />
         <ul>
            <li>
               <h4>Clickable button</h4>	- after click there is called predefined action.<br />
               The button can be HTML text, &lt;button> tag, icon or HTML text with icon. 
               The button type set by <b>Button</b> attribute, the icon file by <b>Icon</b> attribute.
               The button text (if any) set in cell value.<br />
               After click to button is called XML event <b>OnClick</b>.
               The button can be (temporary) disabled by <b>Disabled</b> attribute and hidden by <b>Visible</b> attribute.
            </li>
            <li>
               <h4>Switch button</h4> - button with two states on / off - after click it switches to the other state and is called predefined action.<br />
               The Switch button is set by <b>Switch</b>='1'.
               The button value is button state 0 or 1. 
               The button texts are defined by <b>ButtonText</b> and <b>ButtonTextChecked</b> attributes. 
               The button icons are defined by <b>Icon</b> and <b>IconChecked</b> attributes.<br />
               After check are called XML events <b>OnCheck</b> and <b>OnChange</b>, after uncheck are called <b>OnUncheck</b> and <b>OnSave</b>.
            </li>
            <li>
               <h4>Radio / tab button</h4> - group of switch buttons - after click to one button in group the other buttons are automatically switched off.<br />
               The Radio button is set by <b>Switch</b>='1' and <b>Radio</b>='<i>group</i>', where the <i>group</i> is number of group the button belongs to.<br />
               Set <b>Uncheck</b>='1' to let the button uncheck by clicking it - to permit all buttons in group unchecked.<br />
               The Radio button can be displayed as Tab when set <b>Button</b>='Tab', it is just visual effect, behavior is the same.<br />
               All other attributes are the same as for Switch button.
            </li>
            <li>
               <h4>Menu button</h4> - after click to button is displayed popup menu and user selects one action from the list.<br />
               The menu is defined by <b>List</b> attribute, the first character separated array of the item names. 
               Icons for the items can be defined in <b>Icons</b> attribute.
               After click is called action for clicked item from <b>Actions</b> attribute.<br />
               The <b>List</b> attribute can also contain complete TreeGrid menu definition, with collapsible levels, submenus, OnClick handlers and so on.<br />
               It is also possible to reload the grid with new source xml attached to the clicked item from attribute <b>ReloadData</b>.
            </li>
            <li>
               <h4>Combo switch button</h4> - a user selects button state from its popup menu, for the selected state is called assigned action. <br />
               The Combo switch button is defined <b>Switch</b>='1' and <b>List</b>. It behaves similarly to other combo types like Select or Enum, it has mainly different look.
               After change is called XML event <b>OnChange</b>.
            </li>
            <li>
               <h4>Combo radio / tab button</h4> - a group of combo switch buttons, after change some button state, the other buttons are reset to its predefined empty value.<br />
               Combined the Radio with Combo, when defined <b>Switch</b>, <b>Radio</b> and <b>List</b>. In one group can be combined both standard Radio and Radio combos.<br />
               The off value is defined by <b>EmptyValue</b> attribute, the off icon by <b>EmptyIcon</b> attribute. The off value is selected whenever user selects another Radio or Combo in the group.
            </li>
         </ul>
      </li>
      <li>
         In <b>Space</b> row is possible to use also any other cell types and attributes like in standard data row. 
         You often need to specify <b>Width</b> of the cell, because many types don't calculate the width automatically.
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialCells\s*=\s*(\d+)/), TGIndex = 8;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridCells4", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialCells="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>